import React from "react"
import area from "./styles/bookArea.module.css"
import classNames from "classnames"
import { useState,useEffect } from "react"
import type { PaginationProps } from 'antd'
import { Pagination } from 'antd'

const menuList = [
    {
        title: "热度最高",
        id: 1
    },
    {
        title: "字数最多",
        id: 2
    },
    {
        title: "最近更新",
        id: 3
    },
    {
        title: "评分最高",
        id: 4
    }
]

const book = {
    url: "https://static.zongheng.com/upload/s_image/cover/17/29/172958f65419e178bce12b92529bbaa91714643969433.jpeg",
    title: "我有一剑",
    author: "青鸾峰上",
    type: "玄幻 完结 552万字",
    name: "我有一剑，出鞘即无敌",
    updatetime: '2024-08-11',
    chapter: '大结局 决战'
}

const onChange: PaginationProps['onChange'] = (pageNumber) => {
    console.log('Page: ', pageNumber)
}

const showTotal: PaginationProps['showTotal'] = () => {
    return `共: ${500}条`
}

const BookArea: React.FC<{areaType: string}> = ({areaType}) => {
    const [menuData,setMenuData] = useState<{title:string,id:number}[]>(menuList)
    const [menuAct, setMenuAct] = useState<number>(1)
    const onSwitch = (id: number) => {
        setMenuAct(id)
    }
    useEffect(() => {
        if (areaType === 'library') {
            const list = [{
                title: '书架',
                id: 1
            }]
            setMenuData(list)
        } else {
            setMenuData(menuList)
        }
    }, [areaType])
    return (
        <div className={area.app}>
            <div className={area.menu}>
                {
                    menuData.map((item, key) => {
                        return (
                            <div 
                            onClick={() => onSwitch(item.id)} 
                            className={classNames(area.menu_item, {
                                [area.active]: item.id === menuAct
                            })}
                            key={key}>
                                {
                                    item.title
                                }
                            </div>
                        )
                    })
                }
            </div>
            <div className={area.body}>
                {
                    Array.from({ length: 20 }).map((_, key) => {
                        return (
                            <div className={area.book} key={key}>
                                <div className={area.cover}>
                                    <img className={area.cover_img} src={book.url} alt="" />
                                </div>
                                <div className={area.info}>
                                    <div className={classNames(area.title, area.ellipsis)}>{book.title}</div>
                                    <div className={classNames(area.author, area.ellipsis)}>{book.author}</div>
                                    <div className={classNames(area.type, area.ellipsis)}>{book.type}</div>
                                    <div className={classNames(area.name, area.ellipsis)}>{book.name}</div>
                                    <div className={classNames(area.name, area.ellipsis)}>最后更新：{book.updatetime}</div>
                                    <div className={classNames(area.name, area.ellipsis)}>{book.chapter}</div>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
            <div className={area.page}>
                <Pagination showTotal={showTotal} showQuickJumper defaultCurrent={2} total={500} onChange={onChange} />
            </div>
        </div>
    )
}

export default BookArea